<template>
	<view class="myTask">
		<!--组件-->
		<swiperNavBar
			:scrollIntoView="0"
			:swiperTabList='swiperTabList'
			:activeTabIdx='activeTabIdx'
			currentSwiperWidth="50%"
			:currentSwiperHeight="80"
			swiperCurrentSize='26rpx'
			swiperColor='#1A1A1A'
			swiperCurrentColor='#2989FD'
			:currentSwiperLineShow="true"
			currentSwiperLineActiveWidth="100rpx"
			currentSwiperLineActiveHeight="6rpx"
			currentSwiperLineActiveBg="#2989FD"
			:currentSwiperLineAnimatie="300"
			swiperBgColor="#FFF"
			@change="switchTab">
		</swiperNavBar>
		<view class="relase_warp" v-if="activeTabIdx == 0">
			<view class="my_task_item f f_column" v-for="(item,index) in myProject" :key="index">
				<view class="f f_align_center" @click="$navTo(`../projectDetail/projectDetail?itemId=${item.itemId}`)">
					<view class="head_img project f_shrink0">
						<image :src="item.userHeadUrl" class="autoImg" mode=""></image>
					</view>
					<view class="f f_column f_align">
						<view class="f f_align_center mb12">
							<text class="bold re_name overfont">{{item.itemName}}</text>
							<view class="relase_tip_btn f_shrink0" v-if="item.itemTagType">{{$getDict(item_tag_type,item.itemTagType.split(',')[0])}}</view>
						</view>
						<view class="overfont-2">
							{{item.itemDetail}}
						</view>
					</view>
				</view>
				<view class="relase_btn_b  f f_align f_align_center">
					<view @click="$navTo(`../share/shareItem?itemId=${item.itemId}`)" class="relase_item_handle"><i class="iconfont iconzu5470"></i>分享</view>
					<view @click="concernItem(item)" :class="item.isConcern == '0' ? 'relase_item_handle active' : 'relase_item_handle'"><i class="iconfont iconzu5502"></i>关注</view>
					<view @click="likeItem(item)" :class="item.isLike == '0' ? 'relase_item_handle active' : 'relase_item_handle'"><i class="iconfont iconzu5469"></i>点赞</view>
				</view>
			</view>

			<noData text="还没有关注中的项目哦～" v-if="myProject.length <= 0 && !isLoading" />
		</view>
		<view class="relase_warp" v-else>
			<view class="my_task_item f f_column" v-for="(item,index) in myTask" :key="index">
				<view class="f f_align_center" @click="$navTo(`../taskDetail/taskDetail?jobId=${item.jobId}`)">
					<view class="f f_align_center">
						<view class="head_img radius f_shrink0">
							<image :src="item.userHeadUrl" class="autoImg" mode=""></image>
						</view>
						<view class="f f_column f_align f_shrink0" style="width: 400rpx;">
							<view class="bold re_name mb12 overfont">{{item.title}}</view>
							<view class="f">
								<text>{{item.number - item.residueNumber}}人已赚</text>
								<text class="re_margin">剩{{item.residueNumber}}个名额</text>
							</view>
						</view>
					</view>
					<view class="re_price">赏{{item.amount}}金币</view>
				</view>
				<view class="relase_btn_b  f f_align f_align_center">
					<view class="relase_item_handle"><i class="iconfont iconzu5470"></i>分享</view>
					<view @click="followItem(item)" :class="item.isConcern == '0' ? 'relase_item_handle active' : 'relase_item_handle'"><i class="iconfont iconzu5502"></i>关注</view>
				</view>
			</view>
			<noData text="还没有关注中的任务哦～" v-if="myTask.length <= 0 && !isLoading" />
		</view>

		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
	</view>
</template>

<script>
	import loadMore from '@/components/loadMore/loadMore'
	import { mapState } from 'vuex'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				myProject:[],
				myTask:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},

				swiperTabList: [
					{
						index: 0,
						name: '关注的项目',
						value: ''
					},
					{
						index: 1,
						name: '关注的任务',
						value: '10007011'
					}
				],
				activeTabIdx: 0,
			};
		},
		computed:{
			...mapState({
				item_tag_type:state => state.dictArrs.item_tag_type
			})
		},
		onLoad() {
			this.$store.dispatch('getDictlists','item_tag_type');
		},
		onShow() {
			this.init();
		},
		methods:{
			init(){
				if(this.activeTabIdx == 0){
					this.getProjectList();
				}else{
					this.getMyFollow();
				}
			},
			// tab切换
			switchTab (item) {
				this.activeTabIdx = item.index;
				this.page.pageIndex = 1;

				this.init();
			},
			//获取我的关注任务
			async getMyFollow(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/job/listConcernJob','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				console.log(res.data);
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myTask.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myTask = _this.myTask.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//我关注的项目
			async getProjectList(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/item/listConcernItem','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myProject.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myProject = _this.myProject.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//关注 取消关注
			async followItem(item){
				const _this = this;
				let res = (await _this.$http('/api/auth/job/concernJob','POST',item.jobId)).data;
				if(res && res.code == '0'){
					_this.$showToast(item.isConcern == '1' ? '关注成功' : '取消关注成功');
					if(item.isConcern == '1'){
						item.isConcern = '0';
					}else{
						item.isConcern = '1';
					}
				}else{
					_this.$showToast(res.msg);
				}
			},
			//关注 取消关注
			async concernItem(item){
				const _this = this;
				console.log(item)
				let res = (await _this.$http('/api/auth/item/concernItem','POST',item.itemId)).data;
				if(res && res.code == '0'){
					_this.$showToast(item.isConcern == '1' ? '关注成功' : '取消关注成功');
					if(item.isConcern == '1'){
						item.isConcern = '0';
					}else{
						item.isConcern = '1';
					}
				}else{
					_this.$showToast(res.msg);
				}
			},
			//喜欢 点赞
			async likeItem(item){
				const _this = this;
				let res = (await _this.$http('/api/auth/item/likeItem','POST',item.itemId)).data;
				if(res && res.code == '0'){
					_this.$showToast(item.isLike == '1' ? '点赞成功' : '取消点赞成功');
					if(item.isLike == '1'){
						item.isLike = '0';
						item.likeCount += 1;
					}else{
						item.isLike = '1';
						item.likeCount -= 1;
					}
				}else{
					_this.$showToast(res.msg);
				}
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.init();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.init();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myTask{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		.my_task_item{
			background-color: #fff;
			padding:24rpx 24rpx 0;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #999999;
			border-top: solid 1rpx $ych_br_color;
			.head_img{
				width: 90rpx;height: 90rpx;
				margin-right: 26rpx;
				&.radius{
					image{border-radius: 50%;}
				}
				&.project{
					width: 118rpx;height: 118rpx;
					margin-right: 20rpx;
				}
			}
			.re_name{
				font-size: 32rpx;
				color: #1A1A1A;
			}
			.re_margin{
				margin-left: 96rpx;
			}
			.re_price{
				font-size: 32rpx;
				color: #E6212A;
			}
			.relase_btn_b{
				padding: 24rpx 0;
				border-top: solid 1rpx $ych_br_color;
				margin-top: 24rpx;
				.relase_item_handle{
					width: 333.333%;
					text-align: center;
					border-left:solid 1rpx #E6E6E6;
					&:first-child{
						border-left: none;
					}
					&.active{
						color: #F74E45;
					}
				}
			}
			.relase_tip_btn{
				font-size: 22rpx;
				color: $ych_color;
				border: solid 1rpx $ych_color;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				margin-left: 8rpx;
			}
		}

	}
</style>
